<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<title>购物车</title>
		<style type="text/css">
			h2 {
				padding: 10px;
			}

			a {
				text-decoration: none;
			}

			body {
				background-color: #f5f5f5;
			}

			#ace1 {
				background-color: #f5f5f5;
				width: 100%;
				height: 100%;
			}

			table {
				background-color: #ffffff;
				margin: 0 auto;
				top: 100px;
				width: 90%;
				border-collapse: collapse;
			}

			table th,
			table td {
				padding: 5px;
			}

			.join {
				display: flex;
				text-align: center;
				width: 130px;
				height: 50px;
				background-color: #DDDDDD;
				color: white;
				border: 1px solid #DDDDDD;
				float: right;

			}

			:hover.join {
				background-color: greenyellow;
			}

			.join1 {
				background-color: #f5f5f5;
				padding: 20px;
				margin: 20px;
				height: 100px;

			}

			.ace2 {
				background-color: #B0B0B0;
			}

			.h {
				margin-left: 800px;
				padding: 35px;
			}

			#aa {
				background-color: white;
				height: 100px;
				display: flex;
				border-bottom: 2px solid greenyellow;
			}

			.purchasenumber {
				width: 100%;
				height: 25%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #f1f1f1;
			}

			.purchasenumber .number i,
			.purchasenumber .number input {
				display: inline-block;
				height: 0.6rem;
				line-height: 0.6rem;
				font-size: 0.2rem;
				text-align: center;
				border: 1px solid #515151;
				color: #323232;
			}

			.purchasenumber .number i {
				width: 0.6rem;
			}

			.purchasenumber .number input {
				width: 0.8rem;
				vertical-align: top;
				margin-left: -0.08rem;
				border-left-style: none;
				box-sizing: content-box;
			}

			.purchasenumber .number .minus {
				border-radius: 0.06rem 0 0 0.06rem;
			}

			.purchasenumber .number .plus {
				margin-left: -0.08rem;
				border-radius: 0 0.06rem 0.06rem 0;
				border-left-style: none;
			}

			th {
				color: #E0E0E0;
			}

			.ace3 {
				margin-top: 70px;
			}

			.ace4 {
				width: 20px;
				height: 20px;
				font-size: 5px;
				vertical-align: bottom;
			}

			.ace5 {
				width: 20px;
				height: 20px;
				font-size: 5px;
				vertical-align: bottom;
			}

			#num {
				box-sizing: border-box;
				height: 20px;
				width: 20px;
				font-size: 10px;
				text-align: center;
			}
		</style>
	</head>
	<script>
		var all = document.querySelector('#all');
	         var inputs = document.querySelectorAll('input');
	         // 全选
	         all.onclick = function () {
	             var tag = this.checked; // 全选的状态
	 
	             for (var i = 0; i < inputs.length; i++) {
	                 inputs[i].checked = tag;
	             }
	         }
	         // 点击单个(开关的方式)
	         for (var i = 0; i < inputs.length; i++) {
	             inputs[i].onclick = function () {
	                 var tag = true; // 开关，默认为真
	                 // 点击单个时，检查每一个是否选中，如果有一个没有选中，则开关为假
	                 for (var i = 0; i < inputs.length; i++) {
	                     if (!inputs[i].checked) {
	                         tag = false;
	                         break;
	                     }
	                 }
	                 all.checked = tag;
	             }
	         }
</script>
	<body>
		<div id="aa">
			<img src="image/AG.png" width="180px">
			<h2 style="font-weight: 100; color: orangered;"><i>我的购物车</i></h2>
			<div class="h">
				<a href="index.jsp" style="color: orange;">登录</a>
				<a href="#" style="color: orange;">注册</a>
			</div>
		</div>
		<div id="ace1">
			<form>
				<div class="ace3">
					<table border="0" style="" cellpadding="0" cellspacing="1">
						<thead>
							<tr>
								<th> <input type="checkbox"></th>
								<th>商品</th>
								<th>单价</th>
								<th>数量</th>
								<th>金额</th>
								<th>删除</th>
							</tr>
						</thead>
						<tfoot>
							<tr style="text-align: center;">
								<td><input type="checkbox"></td>
								<td><img src="image/shouji4.webp" width="80px"></td>
								<td>1999</td>
								<td><input id="jian" type="button" value="-">
									<span id="amount">1</span>
									<input id="jia" type="button" value="+">
								</td>
								<td style="color: orange;">1999</td>
								<td><button>×</button></td>
							</tr>
						</tfoot>
				</div>
				</table>
				<div class="join1">
					<div class="join">
						<span id="">
							合计：
							<em>0</em>
							元
						</span>
						<button type="button" class="join">立即购买</button>
					</div>
				</div>
			</form>
		</div>
	</body>
	<script>
		$(function() {
			$("#jian").on("click", function() {

				$("#amount").text(function(i, n) {
					if (n <= 1) {
						$("#jian").prop("disabled", true);
						return
					}
					$(this).text(n - 1);
				});
			})

			$("#jia").on("click", function() {
				$("#amount").text(function(i, n) {
					$("#jian").prop("disabled", false);
					$(this).text(parseInt(n) + 1);
				})
			})
		})

		function add_shoppingcar(btn) {
			var tr = btn.parentNode.parentNode;
			var tds = tr.getElementsByTagName("td");
			var name = tds[0].innerHTML;
			var price = tds[1].innerHTML;
			var tbody = document.getElementById("goods");
			var row = tbody.insertRow();
			row.innerHTML = "<td>" + name + "</td>" +
				"<td>" + price + "</td>" +
				"<td align='center'>" +
				"<input type='button' value='-' onclick='change(this,-1);' />" +
				"<input type='text' id='num' size='1' readonly='readonly' value='1'/>" +
				"<input type='button' value='+' onclick='change(this,+1);' />" +
				"</td>" +
				"<td>" + price + "</td>" +
				"<td align='center'>" +
				"<input type='button' value='X' onclick='del(this);'/>" +
				"</td>";
			total();
		}

		function del(obj) {
			var tr = obj.parentNode.parentNode;
			var tbody = tr.parentNode;
			tbody.removeChild(tr);
			total();
		}

		function total() {
			var tbody = document.getElementById("goods");
			var trs = tbody.getElementsByTagName("tr");
			var sum = 0;
			for (var i = 0; i < trs.length; i++) {
				var tds = trs[i].getElementsByTagName("td");
				var m = tds[3].innerHTML;
				sum += parseFloat(m);
			}
			var total = document.getElementById("total");
			total.innerHTML = sum;

		}

		function change(btn, n) {
			var inputs = btn.parentNode.getElementsByTagName("input");
			var amount = parseInt(inputs[1].value);
			if (amount <= 1 && n < 0) {
				return;
			}
			inputs[1].value = amount + n;
			amount = inputs[1].value;
			var tr = btn.parentNode.parentNode;
			var tds = tr.getElementsByTagName("td");
			var price = parseFloat(tds[1].innerHTML);
			var m = amount * price;
			tds[3].innerHTML = m;
			total();
		}
	</script>
</html>
